import React, { Component } from 'react'
import { HashRouter as Router, Link } from 'react-router-dom'
import { Icon } from 'antd';
import '../../componentStyle/blogHeader.scss'
import AvatorShow_container from '../../../../../containers/AvatorShow_container';
import logo from '../../../../../images/TechF5veBlack'

import store from '../../../../../redux/store'
import { Provider } from 'react-redux'

export default class BlogNav extends Component {
    constructor(props) {
        super(props);

        this.state = {
            displayActive: new Array(3).fill(false).fill(true, this.props.activeIndex, this.props.activeIndex + 1),
            isFocus: false,
            isMouse: false,
            user: null
        }

        store.subscribe(() => { // 监听redux变化
            this.setState({
                user: store.getState().user
            })
        })
    }

    addActive = (index) => {
        let displayActive = new Array(3).fill(false);
        displayActive[index] = true;
        this.line.style.left = index * 88 + 'px';

        this.setState({
            displayActive
        });
    }

    removeActive = () => {
        let displayActive = new Array(3).fill(false).fill(true, this.props.activeIndex, this.props.activeIndex + 1);
        this.line.style.left = this.props.activeIndex * 80 + 'px';

        this.setState({
            displayActive
        });
    }

    handleFocus = () => {
        this.setState({
            isFocus: true
        });
    }

    handleBlur = () => {
        this.setState({
            isFocus: false
        });
    }

    // 处理搜索框中数据
    // TODO: 向后端请求相关文章
    handleClick = () => {
        console.log(this.input.value);
    }

    // 处理搜索图标的bug
    handleMouseDown = (event) => {
        event.preventDefault()
    }

    handleIsLogin = (user) => {
        if (user) {
            return (
                <Provider store={store}>
                    <AvatorShow_container avatorURL={user.avator} top={0} labelTop={60}/>
                </Provider>
            )
        }
        else {
            return (
                <Link to="/login" className="blogButton">
                    登录 / 注册
                </Link>
            )
        }
    }

    render() {
        return (
            <header style={{
                height: 60,
                backgroundColor: '#fff',
                margin: '0 auto',
                width: 1200
            }}>
                <nav style={{ margin: "0 auto" }}>
                    <div className="logo" style={{
                        float: "left",
                    }}>
                        <img src={logo} height={60} alt="logo" />
                    </div>
                    <div className="nav" style={{ float: "left", marginLeft: 50 }}>
                        <Link
                            to={{
                                pathname: `/home`
                            }}
                            className="blogNavItem"
                            onMouseOver={() => this.addActive(0)}
                            onMouseOut={() => this.removeActive()}
                        >
                            首页
                        </Link>
                        <Link
                            to={{
                                pathname: `/blog/undefined`
                            }}
                            style={{
                                textDecoration: 'none',
                                color: (this.state.displayActive[1] ? '#f00' : '#000')
                            }}
                            className="blogNavItem"
                            onMouseOver={() => this.addActive(1)}
                            onMouseOut={() => this.removeActive()}
                        >
                            博客
                        </Link>
                        <Link
                            to={{
                                pathname: `/my/info`
                            }}
                            style={{
                                textDecoration: 'none',
                                color: (this.state.displayActive[2] ? '#f00' : '#000')
                            }}
                            className="blogNavItem"
                            onMouseOver={() => this.addActive(2)}
                            onMouseOut={() => this.removeActive()}
                        >
                            消息
                        </Link>
                        <div
                            ref={(line) => { this.line = line }}
                            style={{
                                backgroundColor: '#ff0000',
                                width: 40,
                                height: 2,
                                position: 'relative',
                                left: (this.props.activeIndex * 80),
                                transitionDuration: '0.6s'
                            }}
                        ></div>
                    </div>
                    {
                        this.handleIsLogin(store.getState().user)
                    }
                    <input
                        id="name"
                        type="text"
                        placeholder={this.state.isFocus ? '请输入要搜索的博客' : ''}
                        autoComplete='off'
                        style={{
                            display: 'inline-block',
                            width: 300,
                            padding: '10px 0 10px 15px',
                            fontWeight: 400,
                            color: '#377D6A',
                            backgroundColor: (this.state.isFocus ? '#eee' : '#ddd'),
                            border: 0,
                            borderRadius: '3px',
                            outline: 0,
                            textIndent: 0,
                            transition: 'all .3s ease-in-out',
                            marginTop: 10,
                            position: 'relative',
                            right: (this.state.isFocus ? -58 : 0)
                        }}
                        onFocus={this.handleFocus}
                        onBlur={this.handleBlur}
                        ref={(input) => this.input = input}
                    />
                    <Icon
                        type="search"
                        style={{
                            position: 'absolute',
                            top: 20,
                            fontSize: 20,
                            transform: (this.state.isFocus ? [`translateX(28px)`] : [`translateX(-30px)`]),
                            cursor: 'pointer',
                            transitionDuration: '.3s'
                        }}
                        onClick={this.handleClick}
                        onMouseDown={(event) => this.handleMouseDown(event)}
                    />
                    <label style={{
                        display: 'inline-block',
                        position: 'relative',
                        left: -300,
                        padding: '10px 15px',
                        textShadow: '0 1px 0 rgba(19, 74, 70, .4)',
                        backgroundColor: '#00CCFF',
                        transition: 'all .3s ease-in-out',
                        borderTopLeftRadius: '3px',
                        borderBottomLeftRadius: '3px',
                        color: '#fff',
                        fontWeight: 'bold'
                    }}>文章</label>
                </nav>
            </header>
        )
    }
}
